<template>
  <div class="home">
    <home-header></home-header>
    <home-swiper :swiperList="swiperList"></home-swiper>
    <home-icon :IconList="IconList"></home-icon>
    <home-location></home-location>
    <home-activity></home-activity>
    <home-hot :hotList="hotList"></home-hot>
    <home-like :likeList="likeList"></home-like>
    <home-vacation :vacationList="vacationList"></home-vacation>
  </div>
</template>
<script>
import { mapState } from "vuex";
import HomeHeader from "../components/Page/HomeHeader.vue";
import HomeSwiper from "../components/Page/HomeSwiper.vue";
import HomeIcon from "../components/Page/Icon.vue";
import HomeLocation from "../components/Page/Location.vue";
import HomeActivity from "../components/Page/Activit.vue";
import HomeHot from "../components/Page/Hot.vue";
import HomeLike from "../components/Page/Like.vue";
import HomeVacation from "../components/Page/Vacation.vue";
export default {
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcon,
    HomeLocation,
    HomeActivity,
    HomeHot,
    HomeLike,
    HomeVacation,
  },
  data() {
    return {
      swiperList: [],
      IconList: [],
      hotList: [],
      likeList: [],
      vacationList: [],
      changeCity: [],
    };
  },
  computed: {
    ...mapState(["city"]),
  },
  methods: {
    getHttp() {
      this.$http
        .get("http://localhost:8080/static/dataHome.json")
        .then((res) => {
          const data = res.data.data;
          data.forEach((item, index) => {
            if (item.city == this.city) {
              this.swiperList = item.swiperList;
              this.IconList = item.IconList;
              this.likeList = item.likeList;
              this.hotList = item.hotList;
              this.vacationList = item.vacationList;
              console.log(index);
            }
          });
        });
    },
  },
  mounted() {
    this.changeCity = this.city;
    this.getHttp();
  },
  activated() {
    if (this.city != this.changeCity) {
      this.getHttp();
      this.changeCity = this.city;
    }
  },
};
</script>
<style>
.home {
  background: #f5f5f5;
}
</style>
